<template>
	<view class="wanl-list">
		<image :src="$wanlshop.oss(image, 400, 0)" mode="aspectFill"
			style="border-radius: 20rpx;width: calc(100vw - 60rpx);margin: 30rpx;margin-top: 30rpx;height: 400rpx;margin-bottom: 0rpx;">
		</image>
		<view class="header" style="display: flex;margin-top: 12rpx;">
			<view class="">
				<view class="" style="color: #000000;font-size: 26rpx;">
					{{content}}
				</view>
			</view>
		</view>
		<!-- 导航条 -->
		<view class="cu-custom" :style="{height: $wanlshop.wanlsys().height + 'px' }" v-if="false">
			<view class="cu-bar bg-bgcolor fixed"
				:style="{ height: $wanlshop.wanlsys().height + 'px', paddingTop: $wanlshop.wanlsys().top + 'px'}">
				<!-- 1.1.9 升级 其他页面进入 -->
				<view v-if="pagesNum > 1" class="action" @tap="$wanlshop.back(1)"><text class="wlIcon-fanhui1"></text>
				</view>
				<!-- 直接进入 -->
				<view v-else class="action" @tap="$wanlshop.on('/pages/index')"><text class="wlIcon-zhuye"></text>
				</view>
				<view class="search-form round" style="display: flex;align-items: center;padding: 20rpx;margin: 20rpx;">
					<text class="wlIcon-sousuo1 text-bold" style="margin-right: 20rpx;"></text>
					<input type="text" maxlength="12" confirm-type="search" placeholder-style="color: #ccc"
						:placeholder="searchKeywords ? searchKeywords : `搜索商品`" @input="onSearchInputChanged" focus
						style="text-align: left;" v-model="searchKeywords" />
				</view>
				<!-- 				<view class="search-form round" @tap="search()">
					<text class="wlIcon-sousuo1 text-bold"></text>
					<view class="searchinfo cu-tag round" v-if="category">
						<text>类目:{{ category }}</text>
						<text class="wlIcon-shanchu2"></text>
					</view>
					<view class="searchinfo cu-tag round text-df" v-else-if="params.search">
						<text>{{ params.search }}</text>
						<text class="wlIcon-shanchu2"></text>
					</view>
					<view v-else>搜索</view>
				</view> -->
				<!-- 				<view class="action" @tap="editListstyle()">
					<text class="wlIcon-listing-jf" v-if="liststyle == 'col-2-20'"></text>
					<text class="wlIcon-liebiao" v-else></text>
				</view> -->
			</view>
		</view>
		<!-- 		<view class="head" :class="{ headtop: scrollStype }">
			<view class="cue">
				<view class="bar">
					<view class="item" :class="{ current: filterIndex === 0 }" @tap="tabClick(0)">综合</view>
					<view class="item" :class="{ current: filterIndex === 1 }" @tap="tabClick(1)">销量</view>
					<view class="item" :class="{ current: filterIndex === 2 }" @tap="tabClick(2)">新上架</view>
					<view class="item" :class="{ current: filterIndex === 3 }" @tap="tabClick(3)">
						<text>价格</text>
						<view class="box">
							<text :class="{ active: priceOrder === 1 && filterIndex === 3 }"
								class="wlIcon-sheng"></text>
							<text :class="{ active: priceOrder === 2 && filterIndex === 3 }"
								class="wlIcon-jiang"></text>
						</view>
					</view>
					<view class="item" @tap="showDrawer()">
						筛选
						<text class="wlIcon-shaixuan margin-left-xs "></text>
					</view>
				</view>
			</view>
		</view> -->
		<!-- 主体 -->
		<block v-if="goodsData.length > 0">
			<wanl-product :dataList="goodsData" :dataStyle="liststyle" :dataType="goodsType" />
		</block>
		<block v-if="goodsData.length === 0 && status !== 'loading'">
			<wanl-empty :text="empty" />
			<!-- <wanl-divider width="60%">猜你喜欢</wanl-divider> -->
			<wanl-product :dataList="likeData" />
		</block>
		<uni-load-more :status="status" :content-text="contentText" />
		<uni-drawer :visible="showRight" mode="right" @close="closeDrawer">
			<view class="drawer">
				<scroll-view scroll-y="true" class="scroll"
					:style="{ height: $wanlshop.wanlsys().windowHeight + 'px' }">
					<view class="item solid-bottom" v-if="drawerData.brand.length > 0">
						<view class="title">品牌</view>
						<view class="list">
							<text v-for="(bd, index) in drawerData.brand" :key="bd.id" :class="{ active: bd.choice }"
								data-key="brand" :data-attribute="index" @tap="onDraver">
								{{ bd.name }}
							</text>
						</view>
					</view>
					<view class="item solid-bottom">
						<view class="title">价格区间</view>
						<view class="from">
							<input type="number" placeholder="最低价" v-model="drawerData.price.low" value="" />
							<text class="">—</text>
							<input type="number" placeholder="最高价" v-model="drawerData.price.high" value="" />
						</view>
					</view>
					<view class="item solid-bottom">
						<view class="title" data-key="city" @tap="onDraverTitle">
							<text>发货地</text>
							<text :class="[drawerType.city ? 'wlIcon-fanhui3' : 'wlIcon-fanhui4']"></text>
						</view>
						<view class="list">
							<text class="wlIcon-weizhi" data-key="sameCity"
								:class="{ active: drawerData.sameCity.choice }" :data-data="drawerData.sameCity.name"
								@tap="onDraver">
								{{ drawerData.sameCity.name }}
							</text>
						</view>
						<view class="title" v-if="drawerType.city"><text>城市</text></view>
						<view class="list" v-if="drawerType.city">
							<text v-for="(cy, index) in drawerData.city" :key="cy.name" :class="{ active: cy.choice }"
								data-key="city" :data-attribute="index" @tap="onDraver">
								{{ cy.name }}
							</text>
						</view>
					</view>
					<block v-if="drawerData.attribute.length > 0" v-for="(att, index) in drawerData.attribute"
						:key="att.name">
						<view class="item solid-bottom">
							<view class="title" :data-key="index" @tap="onDraverTitle">
								<text>{{ att.name }}</text>
								<text
									:class="[drawerData.attribute[index].fold ? 'wlIcon-fanhui3' : 'wlIcon-fanhui4']"></text>
							</view>
							<view class="list" v-if="drawerData.attribute[index].fold">
								<text v-for="(val, key) in att.value" :key="val.name" :data-key="key"
									:data-attribute="index" :class="{ active: val.choice }" @tap="onDraver">
									{{ val.name }}
								</text>
							</view>
						</view>
					</block>
				</scroll-view>
				<view class="footer">
					<view>
						<button class="cu-btn bg-gradual-yellow round-left" @tap="onDrawerReset">重置</button>
						<button class="cu-btn bg-gradual-orange round-right" @tap="onDrawerTo">确定</button>
					</view>
				</view>
			</view>
		</uni-drawer>
		<view class="edgeInsetBottom"></view>
		<home></home>
	</view>
</template>

<script>
	import home from '@/components/home/index'
	export default {
		components: {
			home
		},
		data() {
			return {
				searchKeywords: "",
				WanlScroll: 0, //记录页面滚动
				scrollStype: false, //滚动状态
				filterIndex: 0, //
				priceOrder: 0, //1 价格从低到高 2价格从高到低
				liststyle: 'col-2-20', //列表样式
				goodsData: [], //商品列表数据
				showRight: false,
				category: '',
				goodsType: 'goods',
				empty: '没有找到任何宝贝',
				params: {
					search: '',
					sort: 'weigh',
					order: 'asc',
					page: 1,
					filter: {},
					op: {}
				},
				brand_id: null,
				likeData: [],
				drawerType: {
					attribute: false,
					first: false,
					city: false
				},
				drawerData: {
					price: {
						low: '',
						high: ''
					},
					brand: [],
					attribute: [],
					sameCity: {
						name: ' 定位中..',
						choice: false
					},
					city: [{
							name: '北京',
							choice: false
						},
						{
							name: '天津',
							choice: false
						},
						{
							name: '河北',
							choice: false
						},
						{
							name: '山西',
							choice: false
						},
						{
							name: '内蒙古',
							choice: false
						},
						{
							name: '山东',
							choice: false
						},
						{
							name: '江苏',
							choice: false
						},
						{
							name: '上海',
							choice: false
						},
						{
							name: '浙江',
							choice: false
						},
						{
							name: '安徽',
							choice: false
						},
						{
							name: '福建',
							choice: false
						},
						{
							name: '江西',
							choice: false
						},
						{
							name: '河南',
							choice: false
						},
						{
							name: '湖南',
							choice: false
						},
						{
							name: '湖北',
							choice: false
						},
						{
							name: '广东',
							choice: false
						},
						{
							name: '广西',
							choice: false
						},
						{
							name: '海南',
							choice: false
						},
						{
							name: '辽宁',
							choice: false
						},
						{
							name: '吉林',
							choice: false
						},
						{
							name: '黑龙江',
							choice: false
						},
						{
							name: '四川',
							choice: false
						},
						{
							name: '贵州',
							choice: false
						},
						{
							name: '云南',
							choice: false
						},
						{
							name: '重庆',
							choice: false
						},
						{
							name: '宁夏',
							choice: false
						},
						{
							name: '青海',
							choice: false
						},
						{
							name: '陕西',
							choice: false
						},
						{
							name: '甘肃',
							choice: false
						},
						{
							name: '新疆',
							choice: false
						},
						{
							name: '西藏',
							choice: false
						},
						{
							name: '香港',
							choice: false
						},
						{
							name: '澳门',
							choice: false
						},
						{
							name: '台湾',
							choice: false
						}
					]
				},
				drawerParams: {},
				reload: false, //判断是否上拉
				last_page: 0,
				status: 'loading',
				contentText: {
					contentdown: '',
					contentrefresh: '正在加载..',
					contentnomore: '没有更多数据了'
				},
				pagesNum: 0,
				name: "",
				image: "",
				content: ""
			};
		},
		onLoad(option) {
			this.brand_id = option.id;
			this.name = option.name;
			this.content = option.content;
			this.image = option.image;
			uni.setNavigationBarTitle({
				title: this.name
			})
			this.pagesNum = getCurrentPages().length; // 1.1.9 升级
			if (option.type) {
				this.goodsType = option.type;
			}
			if (option.search) {
				//如果搜索存在
				this.params.search = option.search;
				this.drawerParams.search = option.search;
			} else if (option.data) {
				var data = JSON.parse(option.data);
				this.drawerParams.category_id = data.category_id;
				this.category = data.category_name;
				this.params.filter.category_id = data.category_id;
				this.params.op.category_id = 'in';
			} else {
				console.log('调试模式');
			}
			// 加载位置，后续版本开启加载写入全局
			uni.getLocation({
				type: 'wgs84',
				geocode: true,
				success: mres => {
					uni.request({
						url: 'https://restapi.amap.com/v3/geocode/regeo',
						data: {
							key: this.$wanlshop.config('amapkey'),
							location: mres.longitude + ',' + mres.latitude
						},
						// 1.1.8升级
						success: res => {
							if (res.res.infocode == '10000') {
								let address = res.data.regeocode.addressComponent;
								this.drawerData.sameCity.name = address.province;
							} else {
								this.$wanlshop.msg('获取位置失败：错误' + res.res.info);
							}
						}
					});
				}
			});
			this.loadData();
			if (this.goodsData.length == 0) {
				this.loadlikeData();
			}
		},
		// 监听上拉
		onPullDownRefresh() {
			// this.params.page = 1;
			// this.reload = true;
			// this.loadData();
		},
		// 下拉刷新
		onReachBottom() {
			// if (this.params.page >= this.last_page) {
			// 	this.status = 'noMore';
			// } else {
			// 	this.reload = false;
			// 	this.contentText.contentdown = '上拉显示更多';
			// 	this.params.page = this.params.page + 1; //页码+1
			// 	this.status = 'loading';
			// 	this.loadData();
			// }
		},
		// 监听滚动
		onPageScroll(object) {
			// if (object.scrollTop > this.WanlScroll) {
			// 	this.scrollStype = false;
			// } else {
			// 	this.scrollStype = true;
			// }
			// if (object.scrollTop < 0) {
			// 	this.scrollStype = false;
			// }
			// this.WanlScroll = object.scrollTop;
		},
		// 监听返回
		onUnload() {
			if (this.showRight) {
				this.closeDrawer();
				return true;
			}
		},
		methods: {
			onSearchInputChanged(event) {
				let value = event.detail.value;
				if (!value) {
					// uni.showModal({
					// 	title: '提示',
					// 	content: '请输入内容。'
					// });
					return;
				}
				this.loadData()
			},
			//异步加载商品列表
			async loadData() {
				// this.params.type = this.goodsType;
				let js1 = JSON.parse(JSON.stringify(this.params))
				js1['brand_id'] = this.brand_id;
				if (this.searchKeywords) {
					js1["searchtext"] = this.searchKeywords
				}
				await uni.request({
					url: '/wanlshop/find/find/getbrandShopgoods',
					data: js1,
					success: res => {
						uni.stopPullDownRefresh();
						this.status = 'more';
						this.goodsData = res.data; //数据 追加
						console.log(res.data.length)
						if (res.data.length == 0) {
							this.empty = `没找到相关的宝贝`;
						}
						// this.params.page = res.data.current_page; //当前页码
						// this.last_page = res.data.last_page; //总页码
					}
				});
			},
			// 滚动底部加载猜你喜欢
			async loadlikeData() {
				// await uni.request({
				// 	url: `/wanlshop/product/likes?pages=${this.goodsType}`,
				// 	success: res => {
				// 		this.likeData = res.data.data; //评论数据 追加
				// 	}
				// });
			},
			// 加载侧边栏数据
			async loadDrawer() {
				this.drawerParams.type = this.goodsType;
				await uni.request({
					url: '/wanlshop/product/drawer',
					data: this.drawerParams,
					success: res => {
						var brand = [],
							attribute = [];
						if (res.data.brand) {
							res.data.brand.forEach(item => {
								var brandData = {
									id: item.id,
									name: item.name,
									fold: false, // 展开
									choice: false
								};
								brand.push(brandData);
							});
						}
						if (res.data.attribute) {
							res.data.attribute.forEach(item => {
								var value = [];
								item.value.forEach(vo => {
									var valueData = {
										name: vo.name,
										choice: false
									};
									value.push(valueData);
								});
								var attributeData = {
									name: item.name,
									value: value,
									fold: false
								};
								attribute.push(attributeData);
							});
						}
						this.drawerData.brand = brand;
						this.drawerData.attribute = attribute;
					}
				});
			},
			//筛选点击
			tabClick(index) {
				if (this.filterIndex === index && index !== 3) {
					return;
				}
				this.filterIndex = index;
				if (index === 3) {
					this.priceOrder = this.priceOrder === 1 ? 2 : 1;
				} else {
					this.priceOrder = 0;
				}

				// 排序方式
				if (index === 0) {
					this.params.sort = 'weigh';
					this.params.order = 'desc';
				}
				if (index === 1) {
					this.params.sort = 'sales';
					this.params.order = 'desc';
				}
				if (index === 2) {
					this.params.sort = 'createtime';
					this.params.order = 'desc';
				}
				if (index === 3 && this.priceOrder === 1) {
					this.params.sort = 'price';
					this.params.order = 'desc';
				}
				if (index === 3 && this.priceOrder === 2) {
					this.params.sort = 'price';
					this.params.order = 'asc';
				}
				this.status = 'loading';
				this.params.page = 1;
				this.reload = true;
				this.loadData();
				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0
				});
			},
			// 打开抽屉，并且加载品牌和类目属性
			showDrawer() {
				this.showRight = true;
				if (!this.drawerType.first) {
					this.loadDrawer();
					this.drawerType.first = true;
				}
			},
			// 点击抽屉
			onDraver(e) {
				var index = e.currentTarget.dataset.attribute,
					key = e.currentTarget.dataset.key;
				if (key == 'brand' || key == 'city') {
					// 取消所有选项,选中下面
					this.drawerData[key].forEach((item, keys) => {
						keys != index ? (item.choice = false) : '';
					});
					// 取消同城
					this.drawerData.sameCity.choice = false;
					this.drawerData[key][index].choice = !this.drawerData[key][index].choice;
				} else if (key == 'sameCity') {
					// 取消所有城市选项
					this.drawerData.city.forEach(item => {
						item.choice = false;
					});
					this.drawerData.sameCity.choice = !this.drawerData.sameCity.choice;
				} else {
					// 取消所有选项,选中下面
					this.drawerData.attribute[index].value.forEach((item, keys) => {
						keys != key ? (item.choice = false) : '';
					});
					this.drawerData.attribute[index].value[key].choice = !this.drawerData.attribute[index].value[key]
						.choice;
				}
			},
			// 提交抽屉
			onDrawerTo() {
				// 查询价格
				if (this.drawerData.price.low != '' && this.drawerData.price.high != '') {
					this.params.filter.price = this.drawerData.price.low + ',' + this.drawerData.price.high;
					this.params.op.price = 'BETWEEN';
				} else {
					delete this.params.filter.price;
					delete this.params.op.price;
				}
				// 查询地址
				var cityData = '';
				this.drawerData.city.forEach(item => {
					if (item.choice) {
						cityData = item.name;
					}
				});
				if (cityData) {
					this.params.filter['shop.city'] = '%' + cityData + '%';
					this.params.op['shop.city'] = 'LIKE';
				} else if (this.drawerData.sameCity.choice) {
					this.params.filter['shop.city'] = this.drawerData.sameCity.name;
					this.params.op['shop.city'] = 'LIKE';
				} else {
					delete this.params.filter['shop.city'];
					delete this.params.op['shop.city'];
				}
				// 查询品牌
				var brandData = '';
				this.drawerData.brand.forEach(item => {
					if (item.choice) {
						brandData = item.id;
					}
				});
				if (brandData) {
					this.params.filter.brand_id = brandData;
					this.params.op.brand_id = '=';
				} else {
					delete this.params.filter.brand_id;
					delete this.params.op.brand_id;
				}
				// 查询属性
				var attributeData = [];
				this.drawerData.attribute.forEach((item, index) => {
					// item.name
					item.value.forEach((vo, index) => {
						if (vo.choice) {
							attributeData.push('%' + vo.name + '%');
						}
					});
				});
				// 1.0.8升级 有此项无法查询
				if (attributeData.length > 0) {
					this.params.filter.category_attribute = attributeData.join(',');
					this.params.op.category_attribute = 'LIKE';
				} else {
					delete this.params.filter.category_attribute;
					delete this.params.op.category_attribute;
				}
				this.status = 'loading';
				// 1.0.8升级
				this.goodsData = [];
				this.params.page = 1;
				this.reload = true;
				this.loadData();
				this.closeDrawer();
			},
			// 重置抽屉
			onDrawerReset() {
				this.drawerData.city.forEach(item => {
					item.choice = false;
				});
				this.drawerData.sameCity.choice = false;
				this.loadDrawer();
			},
			// 点击抽屉标题
			onDraverTitle(e) {
				var stype = e.currentTarget.dataset.key;
				if (stype === 'city') {
					this.drawerType[stype] = !this.drawerType[stype];
				} else {
					this.drawerData.attribute[stype].fold = !this.drawerData.attribute[stype].fold;
				}
			},
			// 关闭抽屉
			closeDrawer() {
				this.showRight = false;
			},
			search() {
				this.$wanlshop.to(`/pages/page/search?type=${this.goodsType}`, 'fade-in', 100);
			},
			editListstyle() {
				this.liststyle = this.liststyle == 'col-1-10' ? 'col-2-20' : 'col-1-10';
			}
		}
	};
</script>

<style>
	.cu-custom .search-form {
		border: 3rpx solid #fe6600;
		background-color: #fff;
	}

	.cu-tag:not([class*="bg"]):not([class*="line"]) {
		background-color: #f7f7f7;
	}

	.header {
		background-color: #ffffff;
		margin: 30rpx;
		border-radius: 20rpx;
		padding: 30rpx;
		color: black;
	}
</style>